<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Video Picker</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.oembed.js" type="text/javascript"></script>
	<!--DEFAULT FR-->
</head>

<body>
    <script type="text/javascript">

		$(document).ready(function(){
			var resizer; // Timer
			var resizerIndex;
			var language;
			var url;
			var margins = {
				top: cssToInt($("body").css("margin-top")), 
				right: cssToInt($("body").css("margin-right")), 
				bottom: cssToInt($("body").css("margin-bottom")),
				left: cssToInt($("body").css("margin-left"))
			};
			
			resizerIndex = 0;
									
			if(window.uniboard){
				url = window.uniboard.preference("url", "");
			}else{
				url = "";
			};			
			
			language = navigator.userAgent.split(";");
			language = language[3].replace(/\s/g, "").substr(0, 2);
			
			$("#back-button")
				.click(function(){
					frames['web-content'].history.go(-1);
				});
				
			$("#forward-button")
				.click(function(){
					frames['web-content'].history.go(+1);
				});
			
			$("#textbox").keypress(function(e) {
			    if(e.keyCode == 13) {
			        $("#search-button").trigger("click");
			    }
			});
			
			$("#search-button")
				.click(function(){
					var url = $("#textbox").val();
					var urlStart = url.split("://");
								
					if(urlStart[0]!="http"){
						url = "http://" + url;
					};
										
					window.resizeTo(850, 700);
					
					$("#container")
						.removeClass("welcome")
						.removeClass("change")
						.removeClass("error")
						.addClass("load");
					$("#container-shadow")
						.hide();
					$("#arrow")
						.hide();
					$("#embeded-content")
						.hide();
					$("#web-content")
						.show();
						
					frames['web-content'].location.href = url;
						
					checkcontent();
				})
				.mouseenter(function(){
					$(this)
						.addClass("over");
				})
				.mouseleave(function(){
					$(this)
						.removeClass("over");
				});
			
			if(url.length > 0){
				$("#textbox").val(url);	
				$("#search-button").trigger("click");
			}else{
				$("#embeded-content").load("locales/" + "en" + "/howto.html"); // Welcome screen with some explanations
			};
			
			$("#show-inputfield-button")
				.click(
					function(){
						$("#show-area").hide();
						$("#inputfield").show();
						$("#shadow").show();
						$("#container")
							.removeClass("show").addClass("change");
						adaptWidgetSize(18, 82);
					})
					.mouseenter(function(){
						$(this)
							.addClass("over");
					})
					.mouseleave(function(){
						$(this)
							.removeClass("over");
					});
			
			$(window).resize(function(){
				$("#web-content")
					.attr("width", $(window).width() - 25)
					.attr("height", $(window).height() - 90);
			});
							
			function checkcontent(){
				clearTimeout(resizer);
				resizerIndex = 0;
														
				if(window.uniboard){
					window.uniboard.setPreference("url", $("#textbox").val());
				};

				$("#embeded-content")
					.hide();
				$("#container")
					.removeClass("load").addClass("show");									
			};
			
			function adaptWidgetSize(adjustmentX, adjustmentY){
				var widgetWidth = $("#container").width() + margins.right + margins.left + adjustmentX;
				var widgetHeight = $("#container").position().top + $("#container").height() + margins.bottom + adjustmentY;
				
				window.resizeTo(widgetWidth, $(window).height());
				window.resizeTo($(window).width(), widgetHeight);
			};
				
			function cssToInt(cssvalue){
				return(parseInt(cssvalue.replace("px", "")));
			};
		});
    </script>

    <div id="ubwidget">
		<div id="shadow"></div>
	
    	<div id="inputfield">
			<div id="back-button" class="button">Previous</div>
			<div id="forward-button" class="button">Next</div>
    		<input id="textbox" type="text">
    		<div id="search-button" class="button">Show</div>
    	</div>

   		<div id="container" class="welcome">
			<div id="arrow"><img src="imgs/arrow.png" alt="arrow-top"></div>
			
			<div id="show-container">
				<div id="embeded-content"></div>
				<iframe id="web-content" name="web-content" src="" scrolling=auto frameborder=1 ></iframe>
			</div>
		
			<table cellspacing="0" cellpadding="0" id="container-shadow">
				<tr>
					<td id="shadow-left"></td>
					<td id="shadow-center">&nbsp;</td>
					<td id="shadow-right"></td>
				</tr>
			</table>
		</div>
		
    </div>
</body>

</html>